/**
* Volvo CareTrack UI Components
* =============================
* 
* 
*/

registerNamespace('Volvo.CareTrack.UI');
registerNamespace('Volvo.CareTrack.UI.Components');



//Home Header
Volvo.CareTrack.UI.Components.HomeHeader = function(params) {
	this.title = params.title;
	this.page = params.page;
	
};

proto = Volvo.CareTrack.UI.Components.HomeHeader.prototype;

proto.render = function(parentElement) {
	var componentTemplate = $('#component-HomeHeader').text();
	$(parentElement).append(componentTemplate);
	parentElement.find('h3').text(this.title);
};


//Home Footer
Volvo.CareTrack.UI.Components.HomeFooter = function(params) {
	
	this.page = params.page;
	this.container = null;
	
};

proto = Volvo.CareTrack.UI.Components.HomeFooter.prototype;

proto.render = function(parentElement) {
	
	var componentTemplate = $('#component-HomeFooter').text();
	$(parentElement).append(componentTemplate);

};




//Home Content
Volvo.CareTrack.UI.Components.HomeContent = function(params) {
	
	this.page = params.page;
	
};

proto = Volvo.CareTrack.UI.Components.HomeContent.prototype;

proto.render = function(parentElement) {
	
	var componentTemplate = $('#component-HomeContent').text();
	$(parentElement).append(componentTemplate);

};


//Home BavBar
Volvo.CareTrack.UI.Components.NavBar = function(params) {
	
	this.page = params.page;
	this.container = null;
	
};

proto = Volvo.CareTrack.UI.Components.NavBar.prototype;

proto.render = function(parentElement) {
	var componentTemplate = $('#component-NavBar').text();
	$(parentElement).append(componentTemplate);

};


//Header
Volvo.CareTrack.UI.Components.Header = function(params) {
	this.title = params.title;
	this.page = params.page;
	
};

proto = Volvo.CareTrack.UI.Components.Header.prototype;

proto.render = function(parentElement) {
	var componentTemplate = $('#component-Header').text();
	$(parentElement).append(componentTemplate);
	parentElement.find('h3').text(this.title);
};


//Start
Volvo.CareTrack.UI.Components.Start = function(params) {
	
	this.page = params.page;
	
};

proto = Volvo.CareTrack.UI.Components.Start.prototype;

proto.render = function(parentElement) {
	Volvo.CareTrack.Utilities.setToStorage('currentPage', 'Start');
	var componentTemplate = $('#component-Start').text();
	$(parentElement).append(componentTemplate);
};

proto.pageShow = function(parentElement){
	$.mobile.pageLoading();
	setTimeout(function(){
		var continueProcessing;
		//if(!Volvo.CareTrack.Utilities.checkNetwork()){
			continueProcessing = confirm('No network connection. Do you want to continue?');
		//}
		if(continueProcessing && !Volvo.CareTrack.Dataloader.checkBackend({error:function(){},success:function(data){}})){
			continueProcessing = confirm('Backend System is not available. Do you want to continue?');
		}
		if(continueProcessing && !Volvo.CareTrack.Utilities.checkGoogleMap()){
			continueProcessing = confirm('Google Map is not available. Do you want to continue?');
		}		
		if(continueProcessing){
			jumpTopage('template_home', 'Login');
		}
		else{
			$.mobile.pageLoading(true);
		}
	},3000);	
};

//Login form
Volvo.CareTrack.UI.Components.Login = function(params) {
	
	this.page = params.page;
	
};

proto = Volvo.CareTrack.UI.Components.Login.prototype;

proto.render = function(parentElement) {
	var componentTemplate = $('#component-Login').text();
	$(parentElement).append(componentTemplate);
	
	this.bindSubmit();
};

proto.bindSubmit = function() {
	$('#component-Login-loginButton').click(function() {
		var usernameInput = $('#component-Login-username').val();
		var passwordInput = $('#component-Login-password').val();
		Volvo.CareTrack.Dataloader.login({
			username : usernameInput,
			password : passwordInput,
			error: function(data) {
				//alert('Error response, probably network issue.');
				$('#component-Login-errormsg').removeAttr("style");
				$('#component-Login-errormsg > h3').html("Failed to login");
			},
			success: function(data) {
				var sessionID = data;
				Volvo.CareTrack.Utilities.setToStorage('sessionid', sessionID);
				jumpTopage('template_home', 'Home');
			}
		});
	});
};


//Machine Search
Volvo.CareTrack.UI.Components.SearchMachine = function(params) {
	
	this.page = params.page;

};

proto = Volvo.CareTrack.UI.Components.SearchMachine.prototype;

proto.render = function(parentElement) {
	
	var componentTemplate = $('#component-SearchMachine').text();
	$(parentElement).append(componentTemplate);
	
	this.bindSubmit();
};

proto.bindSubmit = function() {
	$('#component-SearchMachine-searchButton').click(function() {
		var dealerIDInput = $('#component-SearchMachine-searchText').val();
		Volvo.CareTrack.Dataloader.searchMachineByDealerID({
			dealerID : dealerIDInput,
			error: function(data) {
				alert('Error response, probably network issue.');
				//alert(data.title);
			},
			success: function(data) {
				var list = $('#component-SearchMachine-searchResultList');
	  			list.html("");
				var divTitle = $(document.createElement('div')).attr("role","banner").attr("data-role","header").attr("data-position","inline").attr("data-theme","a").addClass("ui-header ui-bar-a");
				var titleHTML = "<a data-icon='arrow-l' href='#' class='ui-btn-left ui-btn ui-btn-up-a ui-btn-icon-left ui-btn-corner-all ui-shadow' data-theme='a'><span class='ui-btn-inner ui-btn-corner-all'><span class='ui-btn-text'>Prev</span><span class='ui-icon ui-icon-arrow-l ui-icon-shadow'></span></span></a>";
				titleHTML += "<h1 class='ui-title' tabindex='0' role='heading' aria-level='1'>Seerch Result ("+data.length+")</h1>";
				titleHTML += "<a data-theme='b' data-icon='arrow-r' href='#' class='ui-btn-right ui-btn ui-btn-up-b ui-btn-icon-left ui-btn-corner-all ui-shadow'><span class='ui-btn-inner ui-btn-corner-all'><span class='ui-btn-text'>Next</span><span class='ui-icon ui-icon-arrow-r ui-icon-shadow'></span></span></a>";
				divTitle.html(titleHTML);
				list.append(divTitle);
				
  				$.each(data, function(key, val) {
  					var liTitle = $(document.createElement('li')).attr("data-role","list-divider").attr("role","heading");
  					liTitle.html(val.name + "<div class='ui-li-count'>"+ val.chassisNo +"</div>");
  					var liBody = $(document.createElement('li'));
  					var bodyHTML = "<a href='javascript:jumpTopage(\"template_home\", \"MachinePosition\")'><p class='ui-li-aside'>" +val.model+ " ("+val.brand+")</p>";
  					bodyHTML += "<h3 class='ui-li-heading'>Type Name : "+val.type.name+"</h3>";
  					bodyHTML += "<p><strong>Generation : "+val.type.generation+"</strong></p>";
  					bodyHTML += "<p class='ui-li-desc'>Description : " +val.type.description+"</p></a>";
  					liBody.html(bodyHTML);
    				list.append(liTitle);
    				list.append(liBody);
  				});
  				
  				var divTitle2 = divTitle.clone();
  				list.append(divTitle2);
  				list.listview('refresh');
			}
		});
		
	});
};

//Machine Posiiton BavBar
Volvo.CareTrack.UI.Components.MachineNavBar = function(params) {
	
	this.page = params.page;
	
};

proto = Volvo.CareTrack.UI.Components.MachineNavBar.prototype;

proto.render = function(parentElement) {
	var componentTemplate = $('#component-MachineNavBar').text();
	$(parentElement).append(componentTemplate);

};


//Machine Position
Volvo.CareTrack.UI.Components.MachinePosition = function(params) {
	this.page = params.page;
};

proto = Volvo.CareTrack.UI.Components.MachinePosition.prototype;

proto.render = function(parentElement) {
	
	var chassisNoInput = "A30D0074001"; //hard code here
	
	Volvo.CareTrack.Dataloader.getMachinePosition({
		chassisNo : chassisNoInput,
		error: function(data) {
			alert('Error response, probably network issue.');
			//alert(data.title);
		},
		success: function(data) {
			$(document).ready(function() {
				$(window).unbind();
				$(window).bind('pageshow resize orientationchange', function(e){
					Volvo.CareTrack.Googlemap.resize();
				});
				Volvo.CareTrack.Googlemap.showMachinePositionOnMap({
					longitude: data.longitude,
					latitude: data.latitude
				});
				
			});
		}
	});
	
	var componentTemplate = $('#component-MachinePosition').text();
	$(parentElement).append(componentTemplate);
};


//My Position
Volvo.CareTrack.UI.Components.MyPosition = function(params) {
	this.page = params.page;
	
};

proto = Volvo.CareTrack.UI.Components.MyPosition.prototype;

proto.render = function(parentElement) {
	
	$(document).ready(function() {
		$(window).unbind();
		$(window).bind('pageshow resize orientationchange', function(e){
			Volvo.CareTrack.Googlemap.resize();
		});
		Volvo.CareTrack.Googlemap.showMyPositionOnMap();
		
	});
	var componentTemplate = $('#component-MyPosition').text();
	$(parentElement).append(componentTemplate);
};


//Show Directions
Volvo.CareTrack.UI.Components.Directions = function(params) {
	this.page = params.page;
	
};

proto = Volvo.CareTrack.UI.Components.Directions.prototype;

proto.render = function(parentElement) {

	var chassisNoInput = "A30D0074001"; //hard code here
	Volvo.CareTrack.Dataloader.getMachinePosition({
		chassisNo : chassisNoInput,
		error: function(data) {
			alert('Error response, probably network issue.');
			//alert(data.title);
		},
		success: function(data) {
			$(document).ready(function() {
				$(window).unbind();
				$(window).bind('pageshow resize orientationchange', function(e){
					Volvo.CareTrack.Googlemap.resize();
				});
				Volvo.CareTrack.Googlemap.showDirectionsOnMap({
					longitude: data.longitude,
					latitude: data.latitude
				});
				
			});
		}
	});
	var componentTemplate = $('#component-Directions').text();
	$(parentElement).append(componentTemplate);
};



Volvo.CareTrack.UI.Components.dialog = function(msg){
//	var currentPage = $.mobile.activePage;
//	var dialogPage = $('<div data-role=\'dialog\' data-theme=\'a\'>' +
//    					'<div data-role=\'header\' data-theme=\'b\'>' +
//    					'<div class=\'ui-title\'>Remove Item?</div>'+
//    					'</div>').appendTo($.mobile.pageContainer);
//	$.mobile.changePage([currentPage, dialogPage], 'pop', false);

};
